<template>
	<view class="mainpadding">
		<view class="flexleft margin_top">
			<view class="margin_right1">
				<u-icon name="map"></u-icon>
			</view>
			<view class="ershiba xiaohui">当前城市</view>
		</view>
		<view class="flexbetween margin_top">
			<view class="sanshier">亚罗士打</view>
			<view class="flexright">
				<image class="weizhi margin_right1" src="../static/image/system/dw.png" mode=""></image>
				<view class="ershiba xiaolan">重新定位</view>
			</view>
		</view>
		<view class="flexleft margin_top">
			<view class="margin_right1">
				<image class="weizhi margin_right1" src="../static/image/system/xz.png" mode=""></image>
			</view>
			<view class="ershiba xiaohui">选择城市</view>
		</view>
		<view class="margin_top">
			<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<!-- #ifdef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<u-index-item>
							<!-- #ifndef APP-NVUE -->
							<u-index-anchor :text="indexList[index]"></u-index-anchor>
							<!-- #endif -->
							<view class="list-cell" v-for="(cell, index) in item">
								{{cell}}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					indexList: ["A", "B", "C"],
								itemArr: [
									['列表A1','列表A2','列表A3'],
									['列表B1','列表B2','列表B3'],
									['列表C1','列表C2','列表C3']
								]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			border-bottom: 1rpx solid #F0F0F0;
			background-color: #fff;
		}
.weizhi{
	width: 28rpx;
	height: 28rpx;
}
</style>
